<template>
	<view class="page-fill">
		<!-- 搜索层 -->
		<search @search="searchbook"></search>
		<view class="whiteGrayBg">
			<!-- Tab -->
			<!-- <view class="tabBox">
				<view class="tab" :class="{'active':tabActive==item.value}" v-for="(item,i) in tabTypeList" :key="i" @click="tabActive=item.value">{{item.name}}</view>
			</view> -->
			<!-- swiper -->
			<view class="swiperBox">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item">
							<image class="img" src="../../static/img/banner/banner1.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="img" src="../../static/img/banner/banner2.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="img" src="../../static/img/banner/banner3.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="img" src="../../static/img/banner/banner4.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="bookWraper">
			<view class="bookTitle">
				<view class="title">热门推荐</view>
				<view class="more">更多<uni-icons type="forward" size="14" color="#B3B3B3"></uni-icons></view>
			</view>
			<view class="bookList clearfix">
				<view v-for="(item,index) in bookList" :key="index" class="book-item" @tap="gotobookdetail(item)">
					<himg class="book-img" :src="item.picUrl" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
					<view class="book-info">
						<view class="book-title ellipsis">{{item.bookName}}</view>
						<view class="book-author ellipsis">作者：{{item.authorName}}</view>
						<view >
							<p v-html="item.bookDesc" class="book-desp ellipsis"></p>
						</view>
					</view>
				</view> 
			</view>
		</view>
		<view class="bookWraper bookWraperLang">
			<view class="bookTitle">
				<view class="title">新书推荐</view>
				<view class="more">更多<uni-icons type="forward" size="14" color="#B3B3B3"></uni-icons></view>
			</view>
			<view class="bookList clearfix">
				<view v-for="(item,index) in newBooks" :key="index" class="book-item" @tap="gotobookdetail(item)">
					<himg class="book-img" :src="item.picUrl" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
					<view class="book-info">
						<view class="book-title ellipsis">{{item.bookName}}</view>
						<view class="book-author ellipsis">作者：{{item.authorName}}</view>
						<view >
							<p v-html="item.bookDesc" class="book-desp ellipsis2"></p>
						</view>
					</view>
				</view> 
			</view>
		</view>
		<view class="tabbarHeight"></view>
	</view>
</template> 

<script>
	import search from '@/components/search/search.vue'
	export default {
		components:{
			search,
		},
		data() {
			return {
				bookList:[],
				newBooks:[],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical', //水平vertical 垂直 horizontal
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#f37b1d',
					buttonColor: '#f37b1d'
				},
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				tabTypeList: [{
					name: '推荐',
					value: 1
				},{
					name: '女生',
					value: 2
				},{
					name: '男生',
					value: 3
				},{
					name: '图书',
					value: 4
				},{
					name: '资讯',
					value: 5
				}],
				tabActive: 1
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.getVersion('android');
			// #endif
			
			this.getbooklist();
			this.getnewBooklist();
			
		},
		methods: {
			onReachBottom() {
				var me = this;
				if(me.page>me.totalpages)return;
				
				me.getbooklist(me.page,me.pagesize);
			},
			gotobookdetail(f){
				uni.navigateTo({
					url:'../bookdetail/bookdetail?fictionid='+f.id+'&title='+f.bookName
				})
			},
			// 热门推荐
			getbooklist(){
				var  me = this;
				var url = me.websiteUrl + '/book/listClickRank';
				me.webhttp(url,{},'GET').then(res=>{
				//	console.info(res);
					if(res.code == 200){
						me.bookList = res.data;
					}
				});
			},
			// 新书榜单
			getnewBooklist(){
				var  me = this;
				var url = me.websiteUrl + '/book/listNewRank';
				me.webhttp(url,{},'GET').then(res=>{
				//	console.info(res);
					if(res.code == 200){
						me.newBooks = res.data;
					}
				});
			},
			searchbook(e) {
				uni.navigateTo({
					url:'../search/search?searchkey='+e
				});
			},
			// #ifdef APP-PLUS
			getVersion(platform){
				var me = this;
				var url = me.websiteUrl + "/book/getVersion/"+platform;
				console.log(url);
				me.webhttp(url,{}).then(res=>{
					console.log(res);
					if(res.code == 200){
						let result = res.data;
						let lastedVersion = result.version;
						let downloadForce = result.force;
						let downloadPath = result.path;
						let updateContent = result.updateContent;
						let nowVersion = plus.runtime.version.replace('.','').replace('.','');
						console.log(nowVersion); 
						if(nowVersion<lastedVersion){
							uni.showModal({
								title: '发现新版本',
								content: updateContent,
								showCancel: downloadForce==1?true:false,
								confirmText: '立即下载更新',
								success: res => {
									if (res.cancel) return;
									plus.runtime.openURL(downloadPath)
								}
							});
						}
					}
				})
			},
			// #endif
		}
	}
</script>

<style scoped lang="scss">
.whiteGrayBg{
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(250,250,250,0) 100%);
}
.tabBox{
	padding: 12rpx 24rpx 24rpx;
	.tab{
		display: inline-block;
		line-height: 88rpx;
		margin-right: 34rpx;
		font-size: 32rpx;
		color: #666;
		&:last-child{
			margin: 0;
		}
		&.active{
			font-size: 48rpx;
			font-weight: bold;
			color: #111;
		}
	}
}
.swiperBox{
	height: 260rpx;
	padding: 0 24rpx;
	.swiper{
		height: 260rpx;
		.img{
			width: 100%;
			height: 260rpx;
		}
	}
}
.bookWraper{
	background: #fff;
	margin: 24rpx 24rpx 0;
	border-radius: 16rpx;
	padding: 32rpx 24rpx;
	.bookTitle{
		display: flex;
		.title{
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
			font-weight: bold;
			flex: 1;
		}
		.more{
			color: #B3B3B3;
			line-height: 48rpx;
		}
	}
	.bookList{
		.book-item{
			width: 50%;
			float: left;
			margin-top: 32rpx;
			display: flex;
			.book-img{
				width: 100rpx;
				height: 136rpx;
				margin-right: 16rpx;
			}
			.book-info{
				width: 190rpx;
				.book-title{
					color: #333;
					line-height: 38rpx;
					font-size: 30rpx;
					font-weight: 600;
				}
				.book-author{
					color: #B3B3B3;
					line-height: 32rpx;
					margin: 12rpx 0 8rpx;
				}
				.book-desp{
					color: #666;
					height: 32rpx;
					line-height: 32rpx;
					font-size: 22rpx;
				}
			}
		}
	}
	&.bookWraperLang{
		.book-item{
			width: 100%;
			.book-img{
				width: 120rpx;
				height: 164rpx;
				margin-right: 16rpx;
			}
			.book-info{
				width: 520rpx;
				.book-desp{
					height: 64rpx;
				}
			}
		}
	}
}
</style>
